<template>
    <div>
        <div v-if="config.showInRow">
            <mu-checkbox v-model="inSideValue"
                      :label="choice.label"
                      :value="choice.value"
                      :key="index"
                      v-for="(choice,index) in choices" ></mu-checkbox>
        </div>
        <div v-else>
            <div v-for="(choice,index) in choices" :key="choice.value">
                <span v-if="choice.level !== undefined" :style="`padding-left: ${choice.level*2}em`">&nbsp;</span>
                <mu-checkbox v-model="inSideValue"
                          :label="choice.label"
                          :value="choice.value"
                          :key="index"
                          ></mu-checkbox>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "EzCheckBox",
        props: {
            value: {},
            config: {}
        },
        data() {
            return {
                inSideValue: [],
                choices:[],
            }
        },
        mounted() {
            if (this.$utils.isArray(this.value)){
                this.inSideValue = this.value
            }else {
                this.inSideValue = []
            }

            //检查是否设置了数据接口，如果是则从接口获取数据
            if (this.config.api === ""){
                this.choices = this.config.choices
            }else {
                this.config.apiParams.limit = this.config.apiParams.limit?this.config.apiParams.limit:1000
                this.config.apiParams.page = this.config.apiParams.page?this.config.apiParams.page:1
                this.$http.post(this.config.api,this.config.apiParams,res=>{
                    this.choices = this.config.apiCbFunc(res.data.lists)
                })
            }

        },
        watch: {
            inSideValue(val) {
                this.$emit("input", val)
            }
        },
    }
</script>

<style scoped>

</style>